<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>购物车</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<style type="text/css">
			.shopCart:after, .shopCart .logo:after{
				display: table;
				content: '';
				clear: both;
			}
			.shopCart{
				position: fixed;
				bottom: 0;
				width: 100%;
				height: 50px;
				background: #000000;
				z-index: 1;
			}
			.shopCart div{
				float: left;
			}
			.shopCart .left{
				width: 70%;
				height: 50px;
				background: #fff;
			}
			.shopCart .right{
				width: 30%;
				height: 50px;
				line-height: 50px;
				text-align: center;
			    background: #1489EB;
    			color: #fff;
			}
			.shopCart .logo{
				position: relative;
				width: 85px;
				height: 64px;
			}
			.shopCart .logo img{
				position: absolute;
				top: -15px;
				left: 15px;
				width: 70%;
			}
			.shopCart .price{
				line-height: 50px;
				color: #000;
			}
			
			body{
				padding-top: 45px;
				padding-bottom: 45px;
			}
			.mui-input-group .mui-input-row{
				height: auto;
			}
			.mui-card{
				margin: 0;
				background-color: #F1F3F5;
			}
			.mui-checkbox input[type=checkbox]{
				top: 50px;
			}
			
			form{
				margin-top: 5px;
			}
			.mui-checkbox a img{
				margin-left: 58px;
				margin-top: 5px;
				margin-right: 5px;
				width: 100px;
				height: 100px;
			}
			.name{
				color: #4A4A4D;
				padding-top: 2px;
			}
			.money{
				color: #FF5403;
				display: inline-block;
				margin-top: 10px;
			}
			.mui-media-body .mui-numbox{
				width: 90px;
				padding: 0 30px;
			}
			.mui-media-body .mui-numbox input{
				color: #000;
				background: #fff;
			}
			.mui-media-body .mui-numbox button{
				width: 30px;
			}
			.mui-media-body{
				padding-bottom: 5px;
			}
			
			.q-span{
				font-family: 'Helvetica Neue', Helvetica, sans-serif;
			    line-height: 1.1;
			    float: left;
			    font-size: 18px;
			    width: 100%;
			    padding: 11px 15px;
			 	padding-left: 20px;
    			border-bottom: 1px solid #bbb;
			}
		
		</style>
	</head>
 
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">购物车</h1>
			<span id="delShoppingcart" class="mui-icon mui-icon-trash mui-pull-right" style="color: #893274;"></span>
		</header>
				<form class="mui-input-group">
					<div id="commList">
						<div class="mui-input-row mui-checkbox mui-left">
							<a href="javascript:;">
								<img class=" mui-pull-left" src="images/p01.jpg">
								<div class="mui-media-body">
									<span class="mui-ellipsis-2 name">香妃润肤乳</span>
									<p class="mui-ellipsis">商品简介--测试用，非登录数据</p>
									<span class="money">￥9.9</span>
									<p class="mui-pull-right">
										<div class="mui-numbox" data-numbox-min="1" >
											<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
											<input id="test" class="mui-input-numbox" type="number" value="1">
											<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
										</div>
									</p>
								</div>
							</a>
							<input name="checkbox" value="Item 1" type="checkbox">
						</div>
					</div>
				</form>
				`
			
			
			<div class="shopCart">
			<div class="left">
				<div class="price">
					<div class="mui-input-row mui-checkbox mui-left">
						<label>全选</label>
						<input id="checkAll" type="checkbox" style="top: 10px;">
					</div>
					<span>合计:￥</span>
					<span id="total">0</span>
				</div>
			</div>
			<div class="right" id="pay">去结算</div>
		</div>
		</div>
		
		<script src="js/mui.min.js"></script>
		<script src="js/jquery.min.js"></script>
		<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init({
				gestureConfig:{
				    longtap: true, //默认为false
				}	
			});
			var userbean = null; 
			var cartData = null ; 
			var data = new Array(); 
			mui.plusReady(function(){
				userbean =  app.getUserGlobalInfo();
				// userInfo = app.getUserGlobalInfo();
				console.log("cart.html ==="+JSON.stringify(userbean));
				// console.log("cart.html userInfo==="+userInfo);
				queryShoppingcartInfo();//查询所有的购物车里面的商品信息
				mui(".mui-numbox").numbox();//初始化数字输入框
			});
			//查询购物车里面的信息
			function queryShoppingcartInfo(){
				if(userbean=="" || userbean==null){
				    mui.toast("请您登录后重试");
					return;
				}
					mui.ajax(app.serverUrl+"/cart/list.action", {
						type:'POST',
						async:  false, // 同步
						dataType: 'json', //服务器返回json格式数据
						timeout: 15000, //15秒超时
						success: function(obj) {
							console.log("执行 了success 方法=====cart.html ");
							console.log('obj=========='+JSON.stringify(obj));
							if(obj.code == 0 || obj.code == "0" ){
								var s=obj.data.cartProductVoList;
								cartData = s;
								// console.log("s========="+s.length);
								// console.log("ssize========="+typeof(s));
								var str="";
								for(var j=0;j<s.length;j++){
								 	str+="<div class=\"mui-input-row mui-checkbox mui-left\">"+
										"	<a href=\"javascript:;\">"+
										"		<img class=\" mui-pull-left\" src=\""+s[j].productMainImage+"\">"+
										"		<div data-shcid=\""+s[j].id+"\" data-commid=\""+s[j].productId+"\"  class=\"mui-media-body\">"+
										"			<span class=\"mui-ellipsis-2 name\">"+s[j].productName+"</span>"+
										"			<p class=\"mui-ellipsis\">"+s[j].productSubtitle+"</p>"+
										"			<span class=\"money\">￥"+s[j].productPrice+"</span>"+
										"			<p class=\"mui-pull-right\">"+
										"				<div class=\"mui-numbox\" data-numbox-min=\"1\" >"+
										"					<button class=\"mui-btn mui-btn-numbox-minus\" type=\"button\">-</button>"+
										"					<input id=\"test\" class=\"mui-input-numbox\" type=\"number\" value="+s[j].quantity+">"+
										"					<button class=\"mui-btn mui-btn-numbox-plus\" type=\"button\">+</button>"+
										"				</div>"+
										"			</p>"+
										"		</div>"+
										"	</a>"+
										"	<input name=\"checkbox\" data-p=\""+s[j].productPrice+"\" data-commid=\""+s[j].productId+"\" value=\"Item1\" type=\"checkbox\">"+
										"</div>";
								}
								$("#commList").empty();
								$("#commList").append(str);
							}else{
								mui.toast('查询数据失败');
								//触发load-login自定义事件,打开login页面
								var cur = plus.webview.currentWebview();
								plus.webview.close(cur);
								var indexWindow = plus.webview.getLaunchWebview();
								mui.fire(indexWindow,'load-login',{login:'login111'})
							}
						},
						error: function(xhr, type, errorThrown) {
							mui.toast('系统错误');
							console.log(type);
							console.log(errorThrown);
						}
					});
			}

			
			//长按清除单个
			mui("body").on('longtap',".mui-media-body",function(){
				console.log('触发长按');
				if(userbean=="" || userbean==null){
					mui.toast("请您登录后重试");
					return;
				}
				var id = $(this).attr("data-shcid");
				console.log("id"+id);
				var btnArray = ['我再想想','确定'];
				mui.confirm('您确定要删除这商品吗？', '', btnArray, function(e) {
					console.log(e.index);//
					if (e.index == 1) {//确定
						 mui.ajax(app.serverUrl+"/cart/delete_product.action?productIds="+id, {
							data:{
								productIds:id
							},
							type:'GET',
							dataType: 'json', //服务器返回json格式数据
							timeout: 15000, //15秒超时
							success: function(obj) {
								if(obj.code == 0 || obj.code == "0" ){
									mui.toast('删除成功');
									//去掉该元素 刷新
									location.reload();
								}else{
									mui.toast('删除失败');
								}
							},
							error: function(xhr, type, errorThrown) {
								mui.toast('系统错误');
							}
						});	
					}
				})
			})
			
			//右上清空购物车
			mui("body").on('tap','#delShoppingcart',function(){//清空购物车
				if(userbean=="" || userbean==null){
				    mui.toast("请您登录后重试");
					return;
				}
				var shoppingName=JSON.parse(userbean).uid;
				var btnArray = ['我再想想','确定'];
				mui.confirm('您确定要清空购物车里的商品？', '', btnArray, function(e) {
					console.log(e.index);//
					if (e.index == 1) {//确定
							mui.ajax(app.serverUrl+"/cart/deleteAll.action", {
								type:'GET',
								dataType: 'json', //服务器返回json格式数据
								timeout: 15000, //15秒超时
								success: function(obj) {
									if(obj.code == 0 || obj.code == "0" ){
										mui.toast('已清空所有商品');
										// 刷新
										location.reload();
									}else{
										mui.toast('清空购物车失败');
									}
								},
								error: function(xhr, type, errorThrown) {
									mui.toast('系统错误');
								}
							});					
						
					} // else我再想想
				})	
			}) 
			
			
			//全选、全不选
			document.getElementById('checkAll').addEventListener('change',function(e) {
	            var listBox = $("[name='checkbox']");
	            if (e.target.checked) {
	                listBox.each(function() {
	                    var ele = this;
	                    ele.checked=true
	                })
	               jsTotal();//计算总额
	               
	            } else {
	                listBox.each(function() {
	                    var ele = this;
	                    ele.checked=false
	                    //ele.removeAttribute('checked');
	                })
	                $("#total").text("0");
	            }
	        })
			
			//数量的变化
			mui("body").on('change',".mui-input-numbox",function(){
				jsTotal();//算出总额
			});
			
			//多选框的改变事件
			mui('body').on('change', '[name=checkbox]', function() {
				jsTotal();//算出总额
			});
		
			//算出总额
			function jsTotal(){
			    var listBox = $("[name='checkbox']:checked");
			    var total = 0;
			    if(listBox.length == 0){
			    	$("#total").text(total);
			    }
			    for(var i=0;i<listBox.length;i++){
					data[i] = new Object();
                	var p = listBox.eq(i).attr("data-p");//单价
					data[i].price = p;
                	var n = listBox.eq(i).parent().find(".mui-input-numbox").val();//数量
					data[i].quantity = n;
                	var m = Math.formatFloat(p*n,2);
                	total = Math.formatFloat(total+m,2);
					data[i].total = total;
					data[i].productId = listBox.eq(i).attr("data-commid");
			    }
			    // console.log(total);
			    $("#total").text(total);
			}
			
			Math.formatFloat = function(f, digit) { 
			    var m = Math.pow(10, digit); 
			    return parseInt(f * m, 10) / m; 
			} 
			var  orderCreatePage= null;
			//去结算
			document.getElementById("pay").addEventListener('tap',function(){
				// console.log('去结算事件触发');
				// plus.webview.open('order-create.html','order-create.html');
				var listBox = $("[name='checkbox']:checked");
				if(listBox.length == 0){
					mui.toast('您还没有选择任何一件商品呢！');
					return;
				}
				
				//获得勾选的商品列表内容传递到data给order-create.html
// 				for(var i=0;i<listBox.length;i++){
// 					var p = listBox.eq(i).attr("data-p");//单价
// 					
// 					var n = listBox.eq(i).parent().find(".mui-input-numbox").val();//数量
// 
// 					var m = Math.formatFloat(p*n,2);
// 					total = Math.formatFloat(total+m,2);
// 					
// 					
// 				}
				var page = mui.preload({
					url:'order-create.html',
					id:'order-create.html',//默认使用当前页面的url作为id
					styles:{},//窗口参数
					extras:{data:data}//自定义扩展参数
				});
				//获得orderCreatePage对象
				if(!orderCreatePage){
					orderCreatePage = plus.webview.getWebviewById('order-create.html');
				  }
				//触发详情页面的newsId事件
				// mui.fire(orderCreatePage,'updateProductList',{
				// 	data:data,//这里是购物车的数据
				// 		
				// });
				//打开详情页面          
				mui.openWindow({
					id:'order-create.html'
				});
			});
			
		</script>
	</body>
 
</html>
